<template>
  <div>
    <el-table
        ref="multipleTableRef"
        :data="addressList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading" element-loading-text="努力加载中..."
    >
      <template #empty>
        <el-image :src="require('@/assets/icon/nodata.png')"/>
        <div>
          <el-text size="large" @click="openAddDialog=true">你还没有收货地址哦，快去
            <el-text type="primary" size="large">创建</el-text>
            一个吧！
          </el-text>
        </div>
      </template>
      <el-table-column type="selection" width="55"/>
      <el-table-column property="name" label="收货人名"/>
      <el-table-column property="province" label="省"/>
      <el-table-column property="city" label="城市"/>
      <el-table-column property="region" label="区"/>
      <el-table-column property="detailAddress" label="详细地址" />
      <el-table-column property="phone" label="联系方式"/>
      <el-table-column>
        <template #header>
          <el-button type="danger" @click="delList">批量删除</el-button>
          <el-button   @click="openAddDialog=true">新增</el-button>
        </template>
        <template #default="scope">
          <el-text>修改</el-text>
          <el-divider direction="vertical"/>
          <el-text @click="del(scope.row.id)">删除</el-text>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <div>
    <el-dialog
        v-model="openAddDialog"
        title="新增收货地址"
        width="40%"
        :before-close="handleClose"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :model="addressDetil" label-width="100" size="large" ref="addRef">
          <el-form-item label="收货人姓名" prop="name">
            <el-input v-model="addressDetil.name"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" prop="postCode">
            <el-input v-model="addressDetil.postCode"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addressDetil.phone"></el-input>
          </el-form-item>
          <el-form-item label="省份/城市/区">
            <elui-china-area-dht @change="onChange"></elui-china-area-dht>
          </el-form-item>
          <el-form-item label="详细地址" prop="detailAddress">
            <el-input type="textarea" v-model="addressDetil.detailAddress"></el-input>
          </el-form-item>
          <el-form-item label="省市区代码" prop="areacode">
            <el-input v-model="addressDetil.areacode" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否默认" prop="defaultStatus">
            <el-switch v-model="addressDetil.defaultStatus" :inactive-value="1" :active-value="0"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="openAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {EluiChinaAreaDht} from 'elui-china-area-dht'
import {getAddressListApi, addAddressApi, delAddressLisApi} from '@/api/memberReceiveAddress'
import {ElMessage, ElMessageBox} from 'element-plus'

const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat
let addRef = ref()
let loading = ref(true)
let addressList = ref([])
let openAddDialog = ref(false)
let selectAddres = ref([])
let addressDetil = reactive({
  name: '',
  phone: '',
  postCode: '',
  province: '',
  city: '',
  region: '',
  detailAddress: '',
  areacode: '',
  defaultStatus: 0,
})

function onChange(e) {
  const one = chinaData[e[0]]
  const two = chinaData[e[1]]
  const three = chinaData[e[2]]
  /*省区名称*/
  addressDetil.province = one.label
  addressDetil.city = two.label
  addressDetil.region = three.label
  /* 省市区代码*/
  addressDetil.areacode = one.value + ',' + two.value + ',' + three.value
}

/**
 * 获取收货地址列表数据
 */
function getAddressList() {
  getAddressListApi().then(res => {
    addressList.value = res.data
    loading.value = false
  })
}

/**
 * 表格多选
 * @param selection 选中的行数据
 */
function handleSelectionChange(selection) {
  selectAddres.value = selection.map(item => {
    return item.id
  })
}

/**
 * 新增收货地址
 */
function saveAddress() {
  addAddressApi(addressDetil).then(() => {
    //  刷新
    return getAddressList()
  })
  openAddDialog.value = false
}

/**
 * 批量删除收货地址
 */
function delList() {
  ElMessageBox.confirm(
      '你确定要永久删除这些记录吗？',
      '警告!',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        delAddressLisApi(selectAddres.value)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '你已取消!',
        })
      })
}

/**
 * 删除一个
 * @param addressId 收货地址的id
 */
function del(addressId) {
  ElMessageBox.confirm(
      '你确定要删除这条记录吗？',
      '警告!',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        delAddressLisApi([addressId]).then(() => {
          getAddressList()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '你已取消!',
        })
      })
}

onMounted(() => {
  getAddressList()
})

</script>

<style scoped>

</style>
